<template>
  <view class="cancel" v-if="expenseShow">
    <view
      :class="['cancel-back', expenseShow ? 'cancel-back-show' : '']"
      @click="open"
    ></view>
    <view :class="['cancel-panel', expenseShow ? 'cancel-panel-show' : '']">
      <view class="panel-tlt">
        <view class="panel-tlt-close" @click="open"
          ><u-icon name="close" color="#55585F" size="24"></u-icon
        ></view>
        <view class="panel-tlt-text">费用明细</view>
      </view>
      <scroll-view class="fee-detail" scroll-y>
        <view class="fee-list">
          <view class="fee-item">
            <view class="fee-name">
              <BgText>车辆租金</BgText>
            </view>
            <view class="fee-content">
              <cellItem label="租车费">{{ `¥${rentFeeSum}` }}</cellItem>
							<view class="calendar-price-list" v-if="priceInfo.calendar_price && priceInfo.calendar_price.length > 0">
								<calendarItem v-for="(item,index) in priceInfo.calendar_price" :key="index" :info="item" />
							</view>
            </view>
          </view>
          <!-- 商家优惠信息 -->
          <!-- <view class="fee-item" v-if="priceInfo.promotion_info">
            <view class="fee-name"><BgText>优惠</BgText></view>
            <view class="fee-content">
							<cellItem
								:label="priceInfo.promotion_info.name"
							>
								<div style="color: red">
									{{ `-¥${priceInfo.promotion_info.off_value}` }}
								</div>
							</cellItem>
            </view>
          </view> -->
          <!-- 手续费 -->
					<!-- <view class="fee-item" v-if="priceInfo.poundage_fee > 0">
            <view class="fee-name"><BgText>服务/手续费</BgText></view>
            <view class="fee-content">
							<cellItem
								v-if="priceInfo.poundage_fee"
								label="手续费"
							>
								{{ `¥${priceInfo.poundage_fee}` }}
							</cellItem>
            </view>
          </view> -->
					<view class="fee-item">
            <view class="fee-name"><BgText>租车保障费</BgText></view>
            <view class="fee-content">
							<!-- 基础服务费 -->
							<!-- <cellItem
								label="基础服务费"
							>
								{{ `¥${priceInfo.basic_service_fee}` }}
							</cellItem> -->
              <!-- 增值服务费 -->
              <cellItem
                v-for="(item,index) in checkedAddedServiceList" :key="index"
                :label="item.service_name"
							>
								
                <text :style="{ color: item.service_price_amount < 0 ? 'red' : '#666' }">{{ `¥${item.service_price_amount}` }}</text>
							</cellItem>
            </view>
          </view>
					<!-- <view class="fee-item" v-if="priceInfo.pick_up_on_door_fee > 0 || priceInfo.return_on_door_fee > 0">
            <view class="fee-name"><BgText>上门送取车</BgText></view>
            <view class="fee-content">
							<cellItem
								label="上门送车费"
								v-if="priceInfo.pick_up_on_door_fee > 0"
							>
								{{ `¥${priceInfo.pick_up_on_door_fee}` }}
							</cellItem>
							<cellItem
								label="上门取车费"
								v-if="priceInfo.return_on_door_fee > 0"
							>
								{{ `¥${priceInfo.return_on_door_fee}` }}
							</cellItem>
            </view>
          </view> -->
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import BgText from "../selectModel/licenseText.vue";
import cellItem from "./cellItem.vue";
import calendarItem from './expenseCalendarItem.vue'
export default {
  name: "expenseDetails",
  data() {
    return {
      expenseShow: false,
      feeDetailList: [], //订单明细
    };
  },
  props: {
    info: {
      type: Object,
      default: () => {}
    },
  },
  components: {
    BgText,
    cellItem,
		calendarItem,
  },
	computed: {
    priceInfo() {
      return this.info.price_info
    },
    checkedAddedServiceList() {
      let added_service_list = this.info.added_service_list || []
      return added_service_list.filter(item => {
        const choose = item.checked || item.is_fixed
        const noShowFeeNameList = ['车辆租金', '零散小时费']
        return choose && !noShowFeeNameList.includes(item.service_name)
      })
    },
		rentFeeSum() {
			let rentFee = this.priceInfo.rent_fee || 0
			let hourFee = this.priceInfo.hour_fee || 0
			return Number(rentFee) + Number(hourFee)
		},
	},
  methods: {
    open() {
      this.expenseShow = !this.expenseShow;
    },
  },
};
</script>

<style lang="scss" scoped>
.cancel {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .cancel-back {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 1;
  }
  .cancel-back-show {
    animation: backin 0.3s ease-in forwards;
  }
  @keyframes backin {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 0.6;
    }
  }
  .cancel-panel-show {
    animation: showin 0.2s ease-in forwards;
  }
  @keyframes showin {
    0% {
      bottom: -50%;
    }
    100% {
      bottom: 0;
    }
  }
  .cancel-panel {
    width: 100%;
    position: fixed;
    left: 0;
    background: #fff;
    z-index: 2;
    border-radius: 24rpx 24rpx 0 0;
		padding-bottom: 40rpx;
    .panel-tlt {
      color: #212329;
      font-size: 28rpx;
      height: 104rpx;
      line-height: 104rpx;
      padding: 0 32rpx;
      position: relative;
      .panel-tlt-close {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 64rpx;
        width: 64rpx;
        position: absolute;
        left: 0;
        top: 20rpx;
      }
      .panel-tlt-text {
        width: 100%;
        text-align: center;
      }
    }
    .fee-detail {
      max-height: 800rpx;
      width: calc(100% - 64rpx);
      margin-left: 32rpx;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      color: #909399;
      font-size: 28rpx;
    }
    .fee-list {
      .fee-item {
        .fee-name {
          display: flex;
          align-items: center;
          .unit {
            font-weight: 600;
            margin-left: 16rpx;
            color: #131313;
          }
        }
      }
    }
  }
	.calendar-price-list {
		display: flex;
		flex-wrap: wrap;
	}
}
</style>
